<template>
	<view>
		<swiper class="card-swiper square-dot" :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3" indicator-active-color="#0081ff">
			<swiper-item v-for="(item,index) in 4" :key="index" :class="cardCur==index?'cur':''">
				<view class="swiper-item">
					<image :src="'https://ossweb-img.qq.com/images/lol/web201310/skin/big3900'+index+ '.jpg'" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
		
		<view class="VerticalBox">
			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation style="height:calc(100vh - 512upx)">
				<view class="cu-item" :class="index==tabCur?'cur':''" v-for="(item,index) in list" :key="index" @tap="tabSelect" :data-id="index">
					{{item.name}}
				</view>
			</scroll-view>
			
			<scroll-view class="VerticalMain" scroll-y scroll-with-animation :scroll-top="scrollTop" style="height:calc(100vh - 512upx)">
				<view class="padding-top padding-lr">
					<view class="cu-bar solid-bottom bg-white">
						<view class="action"><text class="cuIcon-title text-green"></text>{{list[tabCur].name}}</view>
					</view>
					<view class="cu-list menu-avatar">
						<view class="cu-item" v-for="item in categoryMovieList" :data-movieid="item.id" @click="showMovie">
							<view class="cu-avatar lg" :style="'background-image:url('+item.poster+');'"></view>
							<view class="content">
								<view class="text-sm flex">
									<text class="text-cut">{{item.name}}</text>
								</view>
								<view class="text-gray text-sm flex">
									<text class="text-cut">{{item.actors}}</text>
								</view>
							</view>
							<view class="action">
								<view class="text-grey text-xs">{{item.years}}</view>
								<view class="cu-tag round bg-orange sm">{{item.score}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardCur: 0,
				tabCur: 0,
				scrollTop: 0,
				list: [{"id":0,"name":"全部"},{"id":1,"name":"爱情"},{"id":2,"name":"喜剧"},{"id":3,"name":"动作"},{"id":4,"name":"剧情"},{"id":5,"name":"科幻"},{"id":6,"name":"恐怖"},{"id":7,"name":"动漫"},{"id":8,"name":"惊悚"},{"id":9,"name":"犯罪"}],
				categoryMovieList: [{"id":1,"name":"速度与激情9","poster":"https://www.yugaopian.cn/files/mpic/201610/p18050.jpg","playurls":"","status":"预告","type":"动作 / 犯罪","years":2021,"region":"美国","language":"英语 中文字幕","director":"林诣彬","actors":"范·迪塞尔 / 约翰·塞纳 / 米歇尔·罗德里格兹 / 乔丹娜·布鲁斯特","plot":"故事发生在《速度与激情8》的两年后，唐老大将要对付与昔日的敌人塞弗合作的弟弟雅各。","score":9.5,"comments":520,"addtime":"2021-05-15T00:05:03.000+0000"},{"id":2,"name":"柳青","poster":"https://www.yugaopian.cn/files/mpic/202105/p31795.jpg","playurls":"https://vod.pipi.cn/43903a81vodtransgzp1251246104/9a8b034e5285890818335736026/v.f42905.mp4","status":"预告","type":"剧情 / 传记 / 历史","years":2021,"region":"中国大陆","language":"中文","director":"田波","actors":"成泰燊 / 丹琳 / 师清峰 / 卢学习","plot":"影片真实再现了五十六年代，新中国百废待兴，全国开展了轰轰烈烈的社会主义农村合作化运动。青年作家柳青辞掉北京优渥的干部待遇，他决心亲自参与实践，创作一部反映社会主义人民集体创业的史诗巨著。柳青举家落户在皇甫村的一所破庙里，他深入农村建设一线，扎根人民十四年，历经各种运动，面对农业合作社建设的各种困境，他铁肩担道义，和农民一起开辟了社会主义事业在农村的新局面，在各种困境中创作出《创业史》第一部，一经发表，轰动全国。就在他雄心勃勃展开第二部创作时，一场更大的风暴席卷而来，面对人生的磨难，他不忘初心，最终用一生书写了一段艰苦卓绝的社会主义创业史。","score":8.5,"comments":0,"addtime":"2021-05-15T00:05:03.000+0000"},{"id":3,"name":"再见汪先森","poster":"https://www.yugaopian.cn/files/mpic/202104/p31596.jpg","playurls":"","status":"预告","type":"喜剧 / 爱情 / 奇幻","years":2021,"region":"中国大陆","language":"中文","director":"王大治","actors":"萧子墨 / 张国强 / 吕晓霖 / 柴碧云","plot":"12岁的腊肠犬“江米条”在帮主人方一一挽留爱情时挺身而出，却意外离世来到汪星世界，在这里要做的第一件事就是忘却前尘，这就意味着他将不再记起和方一一的点点滴滴，也许记忆可以重置，但爱着方一一的本能经年难忘，江米条奋力反抗冲破阻拦，历经艰险重返人间，穿越茫茫人海，用另一种方式陪伴在方一一身边，在生命的最后一刻，倾尽全力护她周全，用两生两世的温柔全心全意地守护他最爱的方一一。","score":7.5,"comments":0,"addtime":"2021-05-15T00:05:03.000+0000"},{"id":4,"name":"你好世界","poster":"https://www.yugaopian.cn/files/mpic/202104/p31736.jpg","playurls":"","status":"预告","type":"爱情 / 动画 / 奇幻","years":2021,"region":"日本","language":"日语 中文字幕","director":"伊藤智彦","actors":"北村匠海 / 松坂桃李 / 滨边美波 / 子安武人","plot":"为了拯救爱人，16岁的直实卷入了这场现实与虚拟的记忆世界，经历了一系列超乎想象的事情。即使世界毁灭，我也想再见你一面。","score":6.5,"comments":0,"addtime":"2021-05-15T00:05:03.000+0000"}]
			};
		},
		onLoad() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			// 拼接数组，模拟更多数据
			this.categoryMovieList = this.categoryMovieList.concat(this.categoryMovieList);
		},
		onReady() {
			uni.hideLoading()
		},
		methods: {
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			// tabSelect
			tabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.scrollTop = Math.random();
				// 随机打乱，模拟后台数据
				this.categoryMovieList.sort(() => Math.random() - 0.5)
			},
			showMovie(e) {
				var movieId = e.currentTarget.dataset.movieid;
				uni.navigateTo({
					url: '../movie/movie?movieId=' + movieId
				})
			}
		},
	}
</script>

<style>
	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #fff;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
	}

	.VerticalNav.nav .cu-item.cur {
		color: #39b54a;
		background-color: #f1f1f1;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: currentColor;
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
	}

	.VerticalBox {
		display: flex;
	}

	.VerticalMain {
		background-color: #f1f1f1;
		flex: 1;
	}
</style>
